import React, { useEffect, useRef } from 'react'
import * as echarts from "echarts"
import data from "@/config/chengdu.json"
export default function ReactEcharts() {
    const chartRef = useRef()
    useEffect(() => {
        initEcharts()
    }, [])
    const initEcharts = () => {
        const mychart = echarts.init(chartRef.current)
        const option = getOption()
        echarts.registerMap('map', data, {});
        mychart.setOption(option)
    }
    const getOption = () => {
        const option = {
            tooltip: {
                backgroundColor: "#062444",
                borderColor: "#ff2b73",
                triggerOn: 'mousemove', //click
                enterable: true,
            },
            geo: {
                show: true,
                aspectScale: 0.95, //地图长度比
                zoom: 1.1,
                map: 'map',
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false,
                    }
                },
                roam: false, //地图设置不可拖拽，固定的
                itemStyle: {
                    // normal: {
                    // 	areaColor: '#00406b',
                    // 	borderWidth: 1,
                    // 	shadowColor: '#00406b',
                    // 	shadowBlur: 100,
                    // }
                    normal: {
                        areaColor: '#7ef2ff',
                        shadowColor: '#fff',
                        shadowOffsetX: -6,
                        shadowOffsetY: 6,
                        shadowBlur: 12,
                    },
                    emphasis: {
                        show: false,
                        areaColor: '#00684d',
                        borderWidth: 0,
                        color: '',
                        label: {
                            show: false
                        }
                    }
                }
            },
            series: [{
                select: {
                    label: {
                        color: '#fff'
                    },
                    itemStyle: { //选择后的样式
                        borderColor: '#a5f2fc',
                        borderWidth: 1,
                        color: '#267df2', //设置地图点击后的颜色
                        shadowColor: "#00684d", //阴影颜色
                        shadowBlur: 10, //阴影浓度
                    }
                },
                name: '',
                itemStyle: {
                    normal: { //未选中状态
                        borderWidth: 1, //边框大小
                        borderColor: '#a5f2fc',
                        areaColor: '#267df2', //背景颜色
                        label: {
                            show: true, //显示名称
                            formatter: function (params) {
                                return params.name
                            }
                        },
                        // shadowColor: `#00406b`,
                        // shadowOffsetX: -20,
                        // shadowOffsetY: 10,
                        // shadowBlur: 20
                    },
                    emphasis: { // 移动样式
                        borderWidth: 1,
                        borderColor: '#a5f2fc',
                        shadowColor: "rgba(0,0,0,.6)", //阴影颜色
                        shadowBlur: 10, //阴影浓度
                        areaColor: '#267df2',
                        label: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    }
                },
                type: 'map',
                mapType: 'map',
                aspectScale: 0.95, //地图长度比
                zoom: 1.1,
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            color: '#000',
                            fontSize: 12,
                            fontWeight: 'bold'
                        }
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                // data: dataArr
            }]
        }
        return option
    }
    return (
        <div ref={chartRef} style={{ width: "800px", height: "600px" }}>

        </div>
    )
}
